@mixin bg-img($url, $size){
  background-image: url($url + "@2x.png");
  background-repeat: no-repeat;
  background-size: $size;

	@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3){
    background-image: url($url + "@3x.png");
    background-repeat: no-repeat;
    background-size: $size;
  }
		
}

@mixin supports($type, $size){
  // 满减
  &.decrease{
    @include bg-img('/image/decrease_#{$type}', $size);
  }
  // 折扣
  &.discount{
    @include bg-img('/image/discount_#{$type}', $size);
  }
  // 保障
  &.guarantee{
    @include bg-img('/image/guarantee_#{$type}', $size);
  }
  // 发票
  &.invoice{
    @include bg-img('/image/invoice_#{$type}', $size);
  }
  // 单人精彩套餐
  &.special{
    @include bg-img('/image/special_#{$type}', $size);
  }
}

// 星星逻辑
@mixin stars($size, $right){
  $wh: $size / 2 ;
  .stars-#{$size}{
    display: inline-block; // 避免使用这个类名的标签是行内元素，导致宽高无法撑开
    width: $wh + px;
    height: $wh + px;
    margin-right: $right + px;
    &:last-child{
      margin-right: 0;
    }

    &.star-on{
      @include bg-img('/image/star#{$size}_on', $wh+px $wh+px);
    }
    &.star-off{
      @include bg-img('/image/star#{$size}_off', $wh+px $wh+px);
    }
    &.star-half{
      @include bg-img('/image/star#{$size}_half', $wh+px $wh+px);
    }
  }
}